<script lang="ts" setup>
import { ref } from 'vue'
import VChart from 'vue-echarts'

const props = defineProps({
  data: {
    default: {},
  },
  loading: {
    type: Boolean,
    default: true,
  },
})

const todayCount = ref()
const growth = ref()
const dateSeries = ref<any>([])
const chartData = ref<any>([])
const options = ref({
  grid: {
    left: 0,
    right: 0,
    top: 10,
    bottom: 0,
  },
  xAxis: {
    show: false,
    data: dateSeries,
  },
  yAxis: {
    show: false,
  },
  tooltip: {
    show: true,
    trigger: 'axis',
  },
  series: {
    name: '订单额',
    data: chartData,
    type: 'bar',
    barWidth: 7,
    itemStyle: {
      borderRadius: 2,
    },
  },
})
watch(() => props.data, () => {
  if (!props.data || Object.keys(props.data).length === 0) {
    return
  }
  chartData.value = []
  let idx = 0
  dateSeries.value = Object.keys(props.data).sort((a, b) => a.localeCompare(b))
  for (const key of dateSeries.value) {
    chartData.value.push({
      value: props.data[key],
      itemStyle: {
        color: idx % 2 ? '#2CAB40' : '#86DF6C',
      },
    })
    idx++
  }
  todayCount.value = chartData.value[chartData.value.length - 1].value
  growth.value = ((todayCount.value - chartData.value[chartData.value.length - 2].value) * 100 / chartData.value[chartData.value.length - 2].value).toFixed(0)
})
</script>

<template>
  <a-spin :loading="loading" class="w-full">
    <a-card :bordered="false" class="wrapper">
      <div class="content-wrap">
        <div class="content">
          <a-statistic
            title="今日订单额"
            :value="todayCount"
            :value-from="0"
            :precision="2"
            animation
            show-group-separator
          >
            <template #prefix>
              ¥
            </template>
          </a-statistic>
          <div class="desc">
            <a-typography-text type="secondary" class="label">
              较昨日
            </a-typography-text>
            <a-typography-text :type="growth && growth > 0 ? 'danger' : 'success'">
              {{ growth }}%
              <icon-arrow-rise v-if="growth && growth > 0" />
              <icon-arrow-down v-else />
            </a-typography-text>
          </div>
        </div>
        <div class="chart">
          <VChart
            :option="options"
            :autoresize="true"
            :style="{ width: '100%', height: '100%' }"
          />
        </div>
      </div>
    </a-card>
  </a-spin>
</template>

<style scoped lang="less">
.wrapper {
  background: linear-gradient(180deg, #f5fef2 0%, #e6feee 100%);
}
:deep(.arco-card) {
  border-radius: 4px;
}
:deep(.arco-card-body) {
  width: 100%;
  height: 134px;
  padding: 0;
}
.content-wrap {
  width: 100%;
  padding: 16px;
  white-space: nowrap;
}
:deep(.content) {
  float: left;
  width: 108px;
  height: 102px;
}
:deep(.arco-statistic) {
  .arco-statistic-title {
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
  }
  .arco-statistic-content {
    margin-top: 10px;
  }
}

.chart {
  float: right;
  width: calc(100% - 108px);
  height: 90px;
  vertical-align: bottom;
}

.label {
  padding-right: 2px;
  font-size: 12px;
}
</style>
